<template>
  <div class="data-form">
    <el-form :model="datas" :rules="rules" ref="formSave">
      <el-row>
        <el-col :span="7">
          <el-form-item label="分类" prop="category_id">
            <el-select v-model="datas.category_id" placeholder="请选择">
              <el-option
                v-for="item in option"
                :key="item.category_id"
                :label="item.category_name"
                :value="item.category_id"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="7" :offset="1">
          <el-form-item label="音像文件" prop="path">
             <uploader :options="options" :file-status-text="statusText" class="uploader-example" ref="uploader" @file-success="fileSuccess"  @file-complete="fileComplete" @complete="complete">
               <uploader-unsupport></uploader-unsupport>
              <uploader-drop>
                <uploader-btn :attrs="attrs">选择音像文件</uploader-btn>
              </uploader-drop>
              <uploader-list></uploader-list>
            </uploader>
    
          </el-form-item>
        </el-col>
        <el-col :span="8" :offset="1">
          <el-form-item label="音像封面" prop="cover">
            <el-input placeholder="图片文件" v-model="datas.cover" class="input-with-select">
              <el-button
                class="choose"
                @click="fileImg"
                slot="append"
                icon="el-icon-picture-outline "
              >选择图片</el-button>
            </el-input>
            <el-upload
              ref="fileUpimg"
              :headers="header"
              class="upload-demo"
              action="/admin/literature/uploadCover"
              :on-success="handleChange2"
              :limit="1"
              :file-list="fileList2"
            ></el-upload>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="7">
          <el-form-item label="音像名" prop="title">
            <el-input placeholder="音像名" v-model="datas.title" class="input-with-select"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="4" :offset="1">
          <el-form-item label="作者" prop="author">
            <el-input placeholder="作者" v-model="datas.author" class="input-with-select"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="4" :offset="1">
          <el-form-item label="出版社" prop="publisher">
            <el-input placeholder="出版社" v-model="datas.publisher" class="input-with-select"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="3" :offset="1">
          <el-form-item label="ISBN" prop="isbn">
            <el-input placeholder="ISBN" v-model="datas.isbn" class="input-with-select"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="2" :offset="1">
          <el-form-item label="页数" prop="pages">
            <el-input placeholder="0" v-model="datas.pages" class="input-with-select"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="推荐资源">
            <template>
              <el-radio-group v-model="datas.recommended">
                <el-radio :label="0">不推荐</el-radio>
                <el-radio :label="1">推荐</el-radio>
              </el-radio-group>
            </template>
          </el-form-item>
        </el-col>
        <el-col :span="6" :offset="1">
          <el-form-item label="开放资源">
            <template>
              <el-radio-group v-model="datas.open_resources">
                <el-radio :label="0">不开放</el-radio>
                <el-radio :label="1">开放</el-radio>
              </el-radio-group>
            </template>
          </el-form-item>
        </el-col>
        <el-col :span="6" :offset="1">
          <el-form-item label="资源大小(单位：kb)">
            <el-input placeholder="请输入内容" v-model="datas.filesize" :disabled="true"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col>
          <el-form-item label="图文说明" prop="description">
            <el-input
              class="text"
              type="textarea"
              :row="4"
              :autosize="{ minRows: 2, maxRows: 4}"
              placeholder="请输入内容"
               maxlength="1000"
                show-word-limit
              v-model="datas.description"
            ></el-input>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
  </div>
</template>
<script>
const ACCEPT_CONFIG = {
    // image: ['.png', '.jpg', '.jpeg', '.gif', '.bmp'],
    video: ['.mp4', '.rmvb', '.mkv', '.wmv', '.flv'],
    // document: ['.doc', '.docx', '.xls', '.xlsx', '.ppt', '.pptx', '.pdf', '.txt', '.tif', '.tiff'],
    getAll(){
        return [ ...this.video]
    },
};
import store from "../../store";

// import SparkMD5 from "spark-md5"
let access = store.state.user.accessToken,
  refresh = store.state.user.refreshToken;
export default {
  name: "CompileForAv",
  props: {
    title: String,
    option: Array,
    formData: Object,
    isEdit: {
      type: Boolean,
      default: false,
    },
  },
  components: {},
  data() {
    return {
       statusText: {
          success: '成功了',
          error: '出错了',
          uploading: '上传中',
          paused: '暂停中',
          waiting: '等待中'
        },
      options: {
        target: 'http://192.168.0.128:8080/admin/text',
        chunkSize: "2048000",
    
        fileParameterName: "upfile",
        maxChunkRetries: 1,
        testChunks:false, //是否开启服务器分片校验
        // 服务器分片校验函数，秒传及断点续传基础
     
        headers: {
          accessToken: access,
        refreshToken: refresh,
        },
     
      },
      attrs: {
        accept: ACCEPT_CONFIG.getAll(),
      },
      fileList: [],
      header: {
        accessToken: access,
        refreshToken: refresh,
      },
      datas: this.formData,
      fileList1: [],
      fileList2: [],
      form: {
        name: "",
        region: "",
        category_id: null,
        path: "",
        cover: "",
      },
      rules: {
        category_id: [
          { required: true, message: "请选择一个分类", trigger: "change" },
        ],
        title: [{ required: true, message: "请填写音像名称", trigger: "blur" }],
        cover: [{ required: true, message: "请上传图片", trigger: "blur" }],
        path: [{ required: true, message: "请上传文件", trigger: "blur" }],
        author: [{ required: true, message: "请填写作者", trigger: "blur" }],
        publisher: [
          { required: true, message: "请填写出版社", trigger: "blur" },
        ],
        pages: [{ required: true, message: "请填写页面数", trigger: "blur" }],
        isbn: [{ required: true, message: "请填写isbn", trigger: "blur" }],
      },
      dialogFormVisible: false,
    };
  },
  computed: {
    //Uploader实例
    uploader() {
      return this.$refs.uploader.uploader;
    },
  },
  watch: {
    formData: {
      immediate: true,
      handler(val) {
        this.datas = val;
      },
    },
  },
    mounted () {
      this.$nextTick(() => {
        window.uploader = this.$refs.uploader.uploader
      })
    },
  methods: {
    handleChange1(file) {
      let length = this.fileList1.length;
      if (length != 0) {
        this.$message({
          type: "info",
          message: "请删除上传的文件列表",
        });
      } else {
        if (file.code == 2) {
          this.$message({
            type: "info",
            message: file.msg,
          });
          this.fileList1 = [];
        } else {
          this.$message({
            type: "success",
            message: file.message,
          });
          this.$set(this.datas, "path", file.data.path);
        }
      }
    },
    handleChange2(file) {
      let length = this.fileList1.length;
      if (length != 0) {
        this.$message({
          type: "info",
          message: "请删除上传的文件列表",
        });
      } else {
        if (file.code == 2) {
          this.$message({
            type: "info",
            message: file.msg,
          });
          this.fileList2 = [];
        } else {
          this.$message({
            type: "success",
            message: file.message,
          });
          this.$set(this.datas, "cover", file.data.path);
        }
      }
    },
    file() {
      this.$refs.fileUpload.$refs["upload-inner"].handleClick();
    },
    fileImg() {
      this.$refs.fileUpimg.$refs["upload-inner"].handleClick();
    },
    validataForm() {
      this.$refs["formSave"].validate((valid) => {
        if (valid) {
          if (this.title == "添加音像信息") {
            this.$emit("saveData");
            console.log(1);
          } else {
            this.$emit("saveDataEditor");
            console.log(2);
          }
        } else {
          return false;
        }
      });
    },
  complete () {
        console.log('complete', arguments)
      },
      fileComplete () {
        console.log('file complete', arguments)
      },
      //上传成功的事件
fileSuccess (rootFile, file, message, chunk) {
  console.log('complete', rootFile, file, message, chunk)
},
    onFileSuccess(rootFile, file, response, chunk) {
      let res = JSON.parse(response);
      // 服务器自定义的错误（即虽返回200，但是是错误的情况），这种错误是Uploader无法拦截的
      if (!res.result) {
        this.$message({ message: res.message, type: "error" });
        // 文件状态设为“失败”
        this.statusSet(file.id, "failed");
        return;
      }
      // 如果服务端返回需要合并
      if (res.needMerge) {
        // 文件状态设为“合并中”
        this.statusSet(file.id, "merging");
        api
          .mergeSimpleUpload({
            tempName: res.tempName,
            fileName: file.name,
            ...this.params,
          })
          .then((res) => {
            // 文件合并成功
            Bus.$emit("fileSuccess");
            this.statusRemove(file.id);
          })
          .catch((e) => {});
        // 不需要合并
      } else {
        Bus.$emit("fileSuccess");
        console.log("上传成功");
      }
    },


  }
};
</script>
<style lang="scss">
.el-form-item__label {
  line-height: 30px;
  padding: 0;
}
label {
  float: none !important;
}
.el-upload {
  display: block;
}

#global-uploader {
  position: fixed;
  z-index: 20;
  right: 15px;
  bottom: 15px;
  .uploader-app {
    width: 520px;
  }
  .file-panel {
    background-color: #fff;
    border: 1px solid #e2e2e2;
    border-radius: 7px 7px 0 0;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
    .file-title {
      display: flex;
      height: 40px;
      line-height: 40px;
      padding: 0 15px;
      border-bottom: 1px solid #ddd;
      .operate {
        flex: 1;
        text-align: right;
      }
    }
    .file-list {
      position: relative;
      height: 240px;
      overflow-x: hidden;
      overflow-y: auto;
      background-color: #fff;
      > li {
        background-color: #fff;
      }
    }
    &.collapse {
      .file-title {
        background-color: #e7ecf2;
      }
    }
  }
  .no-file {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 16px;
  }
  // .uploader-file-icon {
  //   &:before {
  //     content: "" !important;
  //   }
  //   &[icon="image"] {
  //     background: url(./images/image-icon.png);
  //   }
  //   &[icon="video"] {
  //     background: url(./images/video-icon.png);
  //   }
  //   &[icon="document"] {
  //     background: url(./images/text-icon.png);
  //   }
  // }
  .uploader-file-actions > span {
    margin-right: 6px;
  }
}
/* 隐藏上传按钮 */
#global-uploader-btn {
  position: absolute;
  clip: rect(0, 0, 0, 0);
}
</style>
<style  scoped>
.label-title {
  padding-bottom: 10px;
}
.choose {
  background-color: #5cb85c;
}
.el-select {
  width: 100%;
}
.text {
  height: 100px;
}
.uploader-drop{
  border:1px solid #DCDFE6;
  padding: 0;
}
.uploader-btn {
    border:1px solid #DCDFE6;
    color: #606266;
    float: right;
}
.uploader-drop[data-v-4586f58e] {
    border: 1px solid #DCDFE6;
    padding: 0;
    background-color: #fff;
}
</style>
